<!DOCTYPE html>
<html>
<title>用户管理</title>
<head>
    <link href="/css/layui/css/layui.css" rel="stylesheet">
    <link href="/css/hadmin/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/css/hadmin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/hadmin/css/animate.css" rel="stylesheet">
    <link href="/css/hadmin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/css/hadmin/css/animate.css" rel="stylesheet">
    <link href="/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="/css/multi-select.dist.css" rel="stylesheet">
</head>

<div class="wrapper wrapper-content animated fadeInUp">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>用户管理</h5>
                </div>
                <button type="button" onclick="add()" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal">新增用户
                </button>
                <a href="/api/pay" class="btn btn-primary">充值
                </a>
                <table class="table table-hover table-bordered datatable">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <tr>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>手机号码</th>
                        <th>邮箱</th>
                        <th>昵称</th>
                        <th>用户签名</th>
                        <th>操作</th>
                    </tr>
                    <?php foreach($params as $v): ?>
                    <tr>
                        <td><?=$v['User']['id']?></td>
                        <td><?=$v['User']['username']?></td>
                        <td><?=$v['User']['password']?></td>
                        <td><?=$v['User']['phone']?></td>
                        <td><?=$v['User']['email']?></td>
                        <td><?=$v['User']['nickname']?></td>
                        <td><?=$v['User']['sign']?></td>
                        <td>
                            <i class="layui-icon layui-icon-edit" data-toggle="modal" data-target="#myModal"
                               onclick="add(<?=$v['User']['id']?>,'<?=$v['User']['username']?>', '<?=$v['User']['password']?>', '<?=$v['User']['phone']?>', '<?=$v['User']['email']?>', '<?=$v['User']['nickname']?>', '<?=$v['User']['sign']?>' )"></i>
                            <i class="layui-icon layui-icon-subtraction" onclick="del()"><a></a></i>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </table>

                <?php if($pageCount > 1): ?>
                    <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li
                        <?php if($page == 1 || !$page): ?> class="disabled" <?php endif; ?> >
                        <a <?php if($page == 1 || !$page): ?>  onclick="return false" <?php endif; ?>
                        href="/user/index?page=<?= $page-1?>" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        </a>
                        </li>
                        <?php for($i=0;$i<$pageCount;$i++): ?>
                        <li
                        <?php if($page == $i+1): ?> class="active" <?php endif; ?>><a
                            href="/user/index?page=<?= $i+1 ?>"><?=$i+1?></a></li>
                        <?php endfor; ?>
                        <li
                        <?php if($page == $pageCount): ?> class="disabled" <?php endif; ?> >
                        <a <?php if($page == $pageCount): ?> onclick="return false" <?php endif; ?>
                        href="/user/index?page=<?= $page+1?>" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        </a>
                        </li>
                    </ul>
                </nav>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" data-backdrop="false" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" onclick="close1()"
                        aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">用户新增</h4>
            </div>
            <div class="modal-body">
                <div class="form">
                    <div class="form-group">
                        <label class=" control-label">用户名</label>
                            <input type="hidden" id="id" class="form-control">
                            <input type="text" id="username" placeholder="请输入管理员名" class="form-control">
                    </div>

                    <div class="form-group">
                        <label class=" control-label">邮箱</label>
                        <input type="text" id="email" placeholder="请输入邮箱地址" class="form-control">
                    </div>


                    <div class="form-group">
                        <label class=" control-label">手机号码</label>
                        <input type="text" id="phone" placeholder="请输入手机号码" class="form-control">
                    </div>

                    <div class="form-group">
                        <label class=" control-label">签名</label>
                        <input type="text" id="nickname" placeholder="请输入用户昵称" class="form-control">
                    </div>


                    <div class="form-group">
                        <label class=" control-label">签名</label>
                        <input type="text" id="sign" placeholder="请输入用户签名" class="form-control">
                    </div>

                    <div class="form-group">
                        <label class=" control-label">地址</label>
                        <div class="form-inline">
                            <select type="text" id="address" style="width: 200px" class="form-control">
                                <option value="-1">请选择省</option>
                                <?php foreach($address as $v): ?>
                                <option value="<?= $v['citys']['id']?>"><?= $v['citys']['name']?></option>
                                <?php endforeach; ?>
                            </select>
                            <select disabled type="text" id="address1" style="width: 200px" class="form-control">
                                <option value="-1" >请选择市</option>
                            </select>
                            <select disabled type="text" id="address2" style="width: 200px" class="form-control">
                                <option value="-1" >请选择区</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="close1()" data-dismiss="modal">
                    返回
                </button>
                <button type="button" id="ajax_submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<script src="/css/hadmin/js/jquery.min.js?v=2.1.4"></script>
<script src="/css/hadmin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/css/hadmin/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/css/hadmin/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/css/hadmin/js/plugins/layer/layer.min.js"></script>
<script src="/css/hadmin/js/index.js"></script>
<script src="/js/comment.js"></script>
<script src="/css/hadmin/js/plugins/toastr/toastr.min.js"></script>
<script src="/js/jquery.fancybox.min.js"></script>
<script src="/js/cupload.js"></script>
<script>
    $('#ajax_submit').click(function () {
        var data = {
            'id': $('#id').val(),
            'username': $('#username').val(),
            'phone': $('#phone').val(),
            'email': $('#email').val(),
            'nickname': $('#nickname').val(),
            'sign': $('#sign').val(),
            'address':$('#address').find("option:selected").text() + $('#address1').find("option:selected").text() + $('#address2').find("option:selected").text(),
        };
        $.ajax({
            'url': '/user/dell',
            'data': data,
            'type': 'post',
            'dataType': 'json',
            'success': function (res) {
                if (res.code == 200) {
                    success(res.msg);
                } else {
                    error(res.msg);
                }
                setTimeout(function () {
                    window.location.reload();
                }, 800)
            }
        })
    });

    function add(id = '', username = '', password = '', phone = '', email = '', nickname = '', sign = '') {
        $('#id').val(id);
        $('#username').val(username);
        $('#phone').val(phone);
        $('#email').val(email);
        $('#nickname').val(nickname);
        $('#sign').val(sign);
    }

    $("#address").change(function () {
        let id = $(this).val();
        if (id == -1){
            error("请选择地区");
            $("#address1").attr("disabled", "disabled");
        }
        let data = {
            id,
            'type' : 1,
        };
        $.ajax({
            url : '/user/changeAddress',
            data ,
            type: 'Post',
            dataType : 'json',
            success : function (res) {
                if (res.code == 200) {

                    $("#address1").attr("disabled", false);
                    console.log(res.data);
                    let html = "<option value=\"-1\" id=\"select1\">请选择市</option>";
                    $.each(res.data, function (index, value) {
                        console.log(value.id + '------' + value.name);
                        html += "<option value=" + value.id + ">" + value.name + "</option>"
                    });
                    $("#address1").html(html);
                } else {
                    error(res.msg);
                }
            },
        })
    });

    $("#address1").change(function () {
        let id = $(this).val();
        if (id == -1){
            error("请选择地区");
            $("#address2").attr("disabled", "disabled");
        }
        let data = {
            id,
            'type' : 1,
        };
        $.ajax({
            url : '/user/changeAddress',
            data ,
            type: 'Post',
            dataType : 'json',
            success : function (res) {
                if (res.code == 200) {

                    $("#address2").attr("disabled", false);
                    console.log(res.data);
                    let html = "<option value=\"-1\" id=\"select1\">请选择区</option>";
                    $.each(res.data, function (index, value) {
                        console.log(value.id + '------' + value.name);
                        html += "<option value=" + value.id + ">" + value.name + "</option>"
                    });
                    $("#address2").html(html);
                } else {
                    error(res.msg);
                }
            },
        })
    });


</script>

